<template>
	<view class="container" >
    <view class="banner">
      <Banner :dataList="swiper.data" :itemStyle="swiper.style" />
    </view>
    <u-notice-bar :text="text1" color="#1777FF" bg-color="#E2F0FC" ></u-notice-bar>
    <view class="content">
      <view class="title">
        <view class="box"></view>
        <view class="txt-box" :style="{'background': 'url('+$Config.get('imageUrl')+'/index/title.jpg'+') no-repeat','background-size':'cover' }">关于宝洞</view>
      </view>
      <view class="video">
        <video id="myVideo" src="http://dev-static.gzbdjy.com/index/indexVideo.mp4"
               @error="videoErrorCallback"  controls></video>
      </view>
      <view class="title">
        <view class="box"></view>
        <view class="txt-box" :style="{'background': 'url('+$Config.get('imageUrl')+'/index/title.jpg'+') no-repeat','background-size':'cover' }">我们的优势</view>
      </view>
      <view class="advantage">
        <view class="l1">
          宝洞是全球第一个DAO的股改企业，真正让利于市场，将中心化收益砍掉。利用区块链技术做到真公开透明的将所得利益分配给用户。
        </view>
        <view class="l2">
          <image :src="$Config.get('imageUrl')+'/index/i10.png'" class="image"/>
        </view>
        <view class="l3">
          <view class="info">
            <view class="left">
              <view class="p">加入我们有哪些权益？</view>
              <view class="line">
                <image :src="$Config.get('imageUrl')+'/index/i1.png'" class="h-img"/>
                <span>优质宝洞酒</span>
              </view>
              <view class="line">
                <image :src="$Config.get('imageUrl')+'/index/i1.png'" class="h-img"/>
                <span>分红权</span>
              </view>
              <view class="line">
                <image :src="$Config.get('imageUrl')+'/index/i1.png'" class="h-img"/>
                <span>每日销售分红收益</span>
              </view>
<!--              <view class="line">-->
<!--                <image :src="$Config.get('imageUrl')+'/index/i1.png'" class="h-img"/>-->
<!--                <span>数字股权市值议价</span>-->
<!--              </view>-->
              <view class="line">
                <image :src="$Config.get('imageUrl')+'/index/i1.png'" class="h-img"/>
                <span>服务分红收益</span>
              </view>
            </view>
            <view class="right">
              <image :src="$Config.get('imageUrl')+'/index/i2.png'" class="r-img"/>
            </view>
          </view>
          <view class="btns">
            <button class="btn"  @click="goodsList">立即加入</button>
<!--            <button class="btn"  @click="join">立即加入</button>-->
<!--            <button class="btn" v-if="authentication" @click="goodsList">采购商品</button>-->
<!--            <button class="btn" v-else @click="join">立即加入</button>-->
          </view>
        </view>
      </view>
      <view class="title">
        <view class="box"></view>
        <view class="txt-box" :style="{'background': 'url('+$Config.get('imageUrl')+'/index/title.jpg'+') no-repeat','background-size':'cover' }">合作流程</view>
      </view>
      <view class="tutorial">
        <image :src="$Config.get('imageUrl')+'/index/i15.png'" class="image1"/>
      </view>
      <view class="title">
        <view class="box"></view>
        <view class="txt-box" :style="{'background': 'url('+$Config.get('imageUrl')+'/index/title.jpg'+') no-repeat','background-size':'cover' }">问答公告</view>
      </view>
      <view class="detail" >
        <view class="left">
          <view class="dl1" :style="{'background': 'url('+$Config.get('imageUrl')+'/index/i3.png'+') no-repeat','background-size': '324rpx 388rpx' }">
            <view class="dlp1">QA问答</view>

            <view class="dlp1" v-for="(item,i) in qaList" :key="i" @click="qaDetail(item)" >{{ i+1 }}.{{ item.question }}</view>
            <view class="icon"  :style="{'background': 'url('+$Config.get('imageUrl')+'/index/i6.png'+') no-repeat','background-size': '112rpx 102rpx' }"></view>
          </view>
<!--          <view class="dl1 dl2" @click="goAbout2" :style="{'background': 'url('+$Config.get('imageUrl')+'/index/i5.png'+') no-repeat','background-size': '324rpx 184rpx' }">-->
<!--            <view class="dlp1">什么是RWA？</view>-->
<!--            <view class="dlp2">立即查看></view>-->
<!--            <view class="icon" :style="{'background': 'url('+$Config.get('imageUrl')+'/index/i7.png'+') no-repeat','background-size': '135rpx 88rpx' }"></view>-->
<!--          </view>-->
        </view>
        <view class="right"  :style="{'background': 'url('+$Config.get('imageUrl')+'/index/i4.png'+') no-repeat','background-size': '324rpx 388rpx' }">
          <view class="dlp1">公告中心</view>
          <view  v-for="(item,i) in article1" :key="i" class="dlp1" @click="setArticle(item)">{{ i+1 }}.{{ item.title }}</view>
          <view class="icon" :style="{'background': 'url('+$Config.get('imageUrl')+'/index/i8.png'+') no-repeat','background-size': '112rpx 112rpx' }"></view>
<!--          <view class="icon1" :style="{'background': 'url('+$Config.get('imageUrl')+'/index/i9.png'+') no-repeat','background-size': '324rpx 132rpx' }"></view>-->
        </view>
      </view>
    </view>
    <view class="contact">
      <button class="contact-btn" openType="contact">
        <image :src="$Config.get('imageUrl')+'/index/contact.png'"/>
      </button>
    </view>
<!--    <u-modal :show="popup" title="公告" :content='popupTitle' confirmText="好的" @confirm="popup = false"></u-modal>-->
    <u-popup :show="popup" closeable :safeAreaInsetBottom="false" round="24rpx" mode="center" @close="popup = false">
      <view class="popup">
        <view class="title">{{ popupTitle }}</view>
        <view v-html="popupContent"></view>
      </view>
    </u-popup>
	</view>
</template>

<script>
import storage from '@/utils/storage'
import authMixins from "@/common/authSignTask.mixins.js";
import { checkLogin} from '@/core/app'
import Banner from './components/banner.vue'
import UButton from "../../plugin/uview-ui/components/u-button/u-button.vue";
	export default {
    components: {
      UButton,
      Banner
    },
    mixins: [authMixins],
		data() {
			return {
				title: 'Hello',
        // text1:"从12月1号开始，酒厂自身的销售营收每年11月30号统计汇总完成，酒厂净利润51%归属销售公司年终分红（加上发展资金年终结余的30%）；当前数据为销售公司独立统计数据",
        // url:this.$Config.get('imageUrl'),
				swiper:{
					"style": {
						"btnColor": "#d5a988",
						"btnShape": "round",
						"interval": 20
					},
					"data": [
            // {
            //   "imgUrl":this.$Config.get('imageUrl')+'/index/banner1.png',
            //   "link": null,
            //   "imgName": "banner02.png"
            // },
            {
              "imgUrl":this.$Config.get('imageUrl')+'/index/banner3.jpg',
              "link": null,
              "imgName": "banner03.png"
            },
					]
				},
        isLogin: false,
        popup: false,
        popupTitle:'',
        popupContent:'',
        task:[],
        article2:[],//通知
        article1:[],//公告
        qaList:[],
        customStyle: {
          background: 'transparent',
          padding: 0
        }
			}
		},
		onLoad(query) {
      // console.log('onLoad>>>:',query)
      let userId = query.userId;
      let scene = query.scene;
      if(userId){
        // console.log('userId:',userId)
        storage.set('shareUserId', userId)
      }
      if(scene){
        scene = decodeURIComponent(scene).split(',')
        if(scene.length>1){
          scene = scene[1]
        }
        // console.log('scene:',scene)
        storage.set('shareUserId', scene)
      }
      this.articleList()
      this.articleList1();
      this.getQAList()
		},
    onShow(query){
      // console.log('onShow>>>:',query)
      this.isLogin = checkLogin()
      // if(this.isLogin){
      //   this.signTaskList()
      // }
    },
    //计算属性
    computed: {
      authentication() {
        return this.isLogin && this.task.length > 0 && this.task[0].taskStatus == 'task_finished'
      },
      text1(){
        return this.article2.length > 0 ? this.article2.map((item,i)=>(i+1)+'. '+item.title).join('; ') : ''
      }
    },
		methods: {
      videoErrorCallback: function(e) {
        uni.showModal({
          content: e.target.errMsg,
          showCancel: false
        })
      },
      join() {
        // this.$navTo('page_work/user/share')
        // this.$navTo('page_work/taskList/index')
        this.$navTo('page_work/middle/middle')
      },
      async goodsList() {
        const app = this;
		
		app.$navTo('page_work/goods/list')
		
        // let authStatus = storage.get('authStatus')
        // if(!authStatus){
        //   authStatus = await app.getAuthStatus();
        //   storage.set('authStatus',authStatus)
        // }
        // // authStatus = false
        // if(authStatus){
        //   authStatus && app.$navTo('page_work/goods/list')
        // }else{
        //   uni.showModal({
        //     title: '提示',
        //     content: '请先完成实名认证',
        //     // showCancel: false,
        //     confirmText: "去认证",
        //     cancelText: "稍后认证",
        //     success: res => {
        //       if (res.confirm) {
        //         app.authUrl()
        //       }
        //     }
        //   })
        // }
      },
      signTaskList(){
        const params = {
          taskStatus:'task_finished'
        }
        this.$request.post('wx/fdd/signTaskList',params, {load:false}).then(res=>{
          this.task = res.data
        })
      },
      articleList(){
        this.$request.get('wx/article/list',{type:2}, {load:false}).then(res=>{
          console.log('articleList:',res)
          if(res.data && res.data.articles){
            //取前五条
            // this.article1 = res.data.articles.filter(item=>item.type == 1).slice(0,5)

            this.article2 = res.data.articles.filter(item=>item.type == 2)
          }
        }).catch(err=>{
          console.log(err)
        })
      },
      articleList1(){
        this.$request.get('wx/article/list',{type:1}, {load:false}).then(res=>{
          console.log('articleList:',res)
          if(res.data && res.data.articles){
            //取前五条
            this.article1 = res.data.articles.slice(0,5)

            // this.article2 = res.data.articles.filter(item=>item.type == 2)
          }
        }).catch(err=>{
          console.log(err)
        })
      },
      getQAList(){
        this.$request.get('wx/common/issues',{}, {load:false}).then(res=>{
          if(res.data){
            this.qaList = res.data.slice(0,5)
          }
        }).catch(err=>{
          console.log(err)
        })
      },
      getArticleDetail(id){
        this.$request.get('wx/article/detail',{id}).then(res=>{
          if(res.data){
            this.popupTitle = res.data.title;
            this.popupContent = res.data.content;
            this.popup = true;
          }
        }).catch(err=>{
          console.log(err)
        })
      },
      setArticle(item){
        this.getArticleDetail(item.id)
        // this.popupTitle = item.question;
        // this.popupContent = item.answer;
        // this.popup = true;
      },
      qaDetail(item){
          // this.getArticleDetail(item.id)
        this.popupTitle = item.question;
        this.popupContent = item.answer;
        this.popup = true;
      },
      goAbout1(){
        this.$navTo('page_work/about/about')
      },
      goAbout2(){
        this.$navTo('page_work/about/about1')
      },
      goAbout3(){
        this.$navTo('page_work/about/about2')
      },
		}
	}
</script>

<style lang="scss" scoped>
.container{
  width: 750rpx;
  overflow: hidden;
  .content{
    position: relative;
    border-radius: 20rpx;
    padding: 40rpx;
    box-sizing: border-box;
    background-color: #FFF;
    .title{
      margin-bottom: 20rpx;
      height: 64rpx;
      display: flex;
      align-items: center;
      .box{
        width: 16rpx;
        height: 64rpx;
        background-color: #1777FF;
        border-radius: 8rpx;
      }
      .txt-box{
        margin-left: 10rpx;
        border-radius: 10rpx;
        padding-left: 20rpx;
        padding-right: 100rpx;
        text-align: center;
        font-size: 32rpx;
        color: #FFF;
        line-height: 64rpx;
        //background: url("../../static/index/title.jpg") no-repeat;
        //background-size: cover;
      }
    }
    .video{
      width: 100%;
      margin-bottom: 20rpx;
      #myVideo {
       width: 100%;
       border-radius: 20rpx;
       height: 400rpx;
      }
    }
    .advantage{
      width: 100%;
      margin-bottom: 40rpx;
      .l1{
        border-top: solid 1px #719AC7;
        background: linear-gradient(0deg, rgba(225,239,255,0) 0%, #E1EFFF 100%, rgba(113,154,199,0) 100%);
        padding: 20rpx;
        color:#1777FF;
        font-size: 28rpx;
        line-height: 40rpx;
      }
      .l2{
        margin-top: 20rpx;
        margin-bottom: 40rpx;
        height: 210rpx;
        width: 100%;
        .image {
          width: 100%;
          height: 100%;
          margin: 0 auto;
          display: block;
        }
      }
      .l3{
        background-color: #E2F0FC;
        border-radius: 10rpx;
        padding: 20rpx;
        .info{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left{
            .p{
              font-size: 32rpx;
              font-weight: bold;
              color: #1777FF;
              letter-spacing: 1px;
            }
            .line{
              margin-top: 26rpx;
              display: flex;
              align-items: center;
              gap: 10rpx;
              font-size: 28rpx;
              color: #1777FF;
              font-weight: 500;
              .h-img{
                width: 40rpx;
                height: 48rpx;
              }
            }
          }
          .right{
            width: 248rpx;
            height: 252rpx;
            .r-img{
              width: 100%;
              height: 100%;
              margin-top: 30rpx;
              display: block;
            }
          }
        }
        .btns{
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap:20rpx;
          .btn{
            margin-top: 40rpx;
            background-color: #1777FF;
            border-radius: 20rpx;
            height: 88rpx;
            line-height: 88rpx;
            color: #FFF;
            flex:1;
          }
        }

      }
    }
    .tutorial{
      .image1{
        width: 100%;
        height: 740rpx;
        margin: 0 auto;
        display: block;
      }
    }
    .detail{
      display: flex;
      align-items: center;
      gap: 20rpx;
      margin-top: 40rpx;
      .left{
        display: flex;
        flex-direction: column;
        gap: 20rpx;
        .dl1{
          position: relative;
          box-sizing: border-box;
          width: 324rpx;
          height: 388rpx;
          color: #FAA318;
          padding: 20rpx;
        }
        .dl2{
          //background: url("../../static/index/i5.png") no-repeat;
          //background-size: 324rpx 184rpx;
          color: #0AC892;
          .icon{
            width: 135rpx;
            height: 88rpx;
            //background: url("../../static/index/i7.png") no-repeat;
            //background-size: 135rpx 88rpx;
          }
        }
      }
      .dlp1{
        font-size: 32rpx;
        line-height: 50rpx;
        margin: 20rpx 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .dlp2{
        margin-top: 10rpx;
        font-size: 24rpx;
        font-weight: 500;
      }
      .icon{
        position: absolute;
        top: 10rpx;
        right: 20rpx;
        width: 112rpx;
        height: 102rpx;
        //background: url("../../static/index/i6.png") no-repeat;
        //background-size: 112rpx 102rpx;
      }
      .right{
        position: relative;
        //background: url("../../static/index/i4.png") no-repeat;
        //background-size: 324rpx 388rpx;
        box-sizing: border-box;
        width: 324rpx;
        height: 388rpx;
        color: #1777FF;
        padding: 20rpx;
        .icon{
          bottom: 70rpx;
          right: 20rpx;
          width: 112rpx;
          height: 112rpx;
          //background: url("../../static/index/i8.png") no-repeat;
          //background-size: 168rpx 168rpx;
        }
        .icon1{
          position: absolute;
          bottom: 0rpx;
          right: 0rpx;
          width: 324rpx;
          height: 132rpx;
          //background: url("../../static/index/i9.png") no-repeat;
          //background-size: 324rpx 132rpx;
        }
        .dlp1{
          //显示一行超出隐藏
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .contact{
    position: fixed;
    bottom: 100rpx;
    right: 20rpx;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: #E2F0FC;
    padding: 10rpx;
    text-align: center;
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
    .contact-btn{
      background: transparent;
      padding: 0;
      width: 100%;
      height: 100%;
      border: 0;
      border-radius: 50%;
      &:after{
        display: none;
      }
    }
    image{
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .popup{
    padding:34rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #4D4D4D;
    line-height: 48rpx;
    box-sizing: border-box;
    width: 600rpx;
    margin: 0 auto;
    .title{
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
      text-align: center;
      margin-bottom: 10rpx;
    }
  }
}


</style>
